<template>
  <view>
    <view class="u-p-24 flex-row justify-around flex-wrap">
      <my-btn class="u-m-b-16" :size="[160, 60, 24]" color="#fff" bg="blue" inline @click="callphone = true">拨打电话</my-btn>
      <my-btn class="u-m-b-16" :size="[160, 60, 24]" color="#fff" bg="blue" inline @click="beizhu = true">备注</my-btn>
      <my-btn class="u-m-b-16" :size="[160, 60, 24]" color="#fff" bg="blue" inline @click="lianxi = true">联系方式</my-btn>
      <my-btn class="u-m-b-16" :size="[160, 60, 24]" color="#fff" bg="blue" inline @click="shaixuanShow = true">筛选</my-btn>
      <my-btn class="u-m-b-16" :size="[160, 60, 24]" color="#fff" bg="blue" inline @click="ziti = true">自提时间</my-btn>
    </view>

    <!-- 拨打电话 -->
    <u-modal v-model="callphone" title="拨打" content="16899199" show-cancel-button confirm-color="#ffc671"></u-modal>

    <!-- 备注 -->
    <u-popup v-model="beizhu" mode="center" border-radius="24">
      <view class="pop-wrap">
        <view class="pop-title">备注</view>
        <u-input v-model="val" type="textarea" border />

        <view class="pop-btn u-m-t-24">确定</view>
      </view>
    </u-popup>

    <!-- 联系方式 -->
    <u-popup v-model="lianxi" mode="center" border-radius="24">
      <view class="pop-wrap">
        <view class="pop-title">联系方式</view>
        <u-field v-model="phone" label="电话" placeholder="请填写电话">
        </u-field>
        <u-field v-model="name" label="姓名" placeholder="请填写姓名">
        </u-field>
        <view class="pop-btn u-m-t-24">确定</view>
      </view>
    </u-popup>

    <!-- 自提时间 -->
    <u-popup v-model="ziti" mode="center" border-radius="24">
      <view class="pop-wrap">
        <view class="pop-title">自提时间</view>

        <view class="pop-ziti flex-row justify-around align-center">
          <view class="day on">今天</view>
          <view class="day">明天</view>
          <view class="day">周日</view>
          <view class="day">周一</view>
          <view class="day">周二</view>
        </view>

        <u-gap height="24"></u-gap>
        <view class="u-p-24 text-center text-bold" @click="zitiPickerShow = true">12点</view>

        <u-picker mode="time" v-model="zitiPickerShow" :params="{
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: false,
					second: false
				}"></u-picker>

        <view class="pop-btn u-m-t-24">确定</view>
      </view>
    </u-popup>

    <!-- 筛选 -->
    <shaixuan v-model="shaixuanShow"></shaixuan>
  </view>
</template>

<script>
  import shaixuan from '../../components/shaixuan.vue'
  export default {
    components: {
      shaixuan
    },
    data() {
      return {
        callphone: false,
        beizhu: false,
        lianxi: false,
        ziti: false,
        zitiPickerShow: false,
        shaixuanShow: false,
        phone: '',
        name: '',
        val: ''
      };
    }
  }
</script>
